<template>
	<div class="p-6 space-y-6">

		<el-tabs v-model="activeTab">
			<el-tab-pane label="外协商资料" name="supplier">
				<el-table :data="suppliers" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="外协商名称" />
					<el-table-column prop="contact" label="联系方式" />
					<el-table-column prop="location" label="所在地" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="外协价格录入" name="priceEntry">
				<el-table :data="priceEntries" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="supplier" label="外协商" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="price" label="价格" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="外协价格管理" name="priceManage">
				<el-table :data="priceManage" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="supplier" label="外协商" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="price" label="价格" />
					<el-table-column prop="date" label="更新时间" />
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('supplier')

const suppliers = ref(Array.from({ length: 10 }).map((_, i) => ({
	name: `外协商${i + 1}`,
	contact: `1380000${1000 + i}`,
	location: ['上海', '深圳', '北京', '广州', '成都'][Math.floor(Math.random() * 5)]
})))

const priceEntries = ref(Array.from({ length: 10 }).map(() => ({
	supplier: `外协商${Math.floor(Math.random() * 10) + 1}`,
	product: ['EUV光刻胶', 'G线光刻胶', '蚀刻液', '导电胶', '纳米抛光液'][Math.floor(Math.random() * 5)],
	price: (Math.random() * 3000 + 500).toFixed(2)
})))

const priceManage = ref(Array.from({ length: 10 }).map(() => ({
	supplier: `外协商${Math.floor(Math.random() * 10) + 1}`,
	product: ['EUV光刻胶', 'G线光刻胶', '蚀刻液', '导电胶', '纳米抛光液'][Math.floor(Math.random() * 5)],
	price: (Math.random() * 3000 + 500).toFixed(2),
	date: new Date(new Date().getTime() - Math.random() * 1000 * 60 * 60 * 24 * 30).toLocaleDateString()
})))
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
